<template>
  <v-card class="mx-auto">
    <v-card-actions>
      <v-btn color="primary" small @click.stop="onAddNewArticle"
        >发布新文章</v-btn
      >
      <v-dialog v-model="showArticleEditor">
        <ArticleEditor
          :article="curArticle"
          @cancel="showArticleEditor = false"
          @finish="onFinishEdit"
        >
        </ArticleEditor>
      </v-dialog>
    </v-card-actions>
    <DataTableServer
      :headers="headers"
      :queryBackendFunc="queryArticle"
      :sortableProps="[]"
      :getDataTrigger="dataTrigger"
      dense
    >
      <template v-slot:item.create_time="{ item }">
        <span>
          {{ simpleDateFormat(item.create_time) }}
        </span>
      </template>
      <template v-slot:item.update_time="{ item }">
        <span>
          {{ simpleDateFormat(item.update_time) }}
        </span>
      </template>
      <template v-slot:item.action="{ item }">
        <span>
          <v-btn color="primary" small @click.stop="onEditArticle(item)"
            >编辑</v-btn
          >
          <v-btn color="primary" small @click.stop="deleteArticle(item)"
            >删除</v-btn
          >
        </span>
      </template>
    </DataTableServer>
  </v-card>
</template>

<script>
  // 文章列表
  import DataTableServer from "@/components/DataTableServer"
  import ArticleEditor from "./ArticleEditor"
  import DateMixin from "@/mixin/DateMixin"
  import { Article } from "@/store/models/article"

  export default {
    name: "ArticleList",
    components: {
      DataTableServer,
      ArticleEditor,
    },
    mixins: [DateMixin],
    props: {
      category: Object,
      headers: {
        type: Array,
        required: false,
        default: () => [
          {
            text: "id",
            align: "left",
            sortable: true,
            value: "id",
          },
          {
            text: "标题",
            align: "left",
            sortable: true,
            value: "subject",
          },
          {
            text: "所属栏目",
            align: "left",
            sortable: true,
            value: "category.category_name",
          },
          {
            text: "创建人",
            align: "left",
            sortable: true,
            value: "created_by.userdesc",
          },
          {
            text: "创建时间",
            align: "left",
            sortable: true,
            value: "create_time",
          },
          {
            text: "更新时间",
            align: "left",
            sortable: true,
            value: "update_time",
          },
          {
            text: "操作",
            align: "left",
            sortable: true,
            value: "action",
          },
        ],
      },
    },
    data: () => ({
      showArticleEditor: false,
      curArticle: new Article(),
      dataTrigger: false,
    }),

    watch: {
      "category.id": function(val) {
        if (val && val > 0) {
          this.dataTrigger = !this.dataTrigger
        }
      },
    },

    methods: {
      async queryArticle(query_args, page, per_page) {
        const query_params = { ...query_args, category_id: this.category.id }

        const results = await Article.fetch(query_params, page, per_page)
        // 让父组件能感知总数
        this.$emit("updateTotalItem", results.total)
        return results
      },
      onAddNewArticle() {
        this.curArticle = new Article()
        this.curArticle.category_id = this.category.id
        this.showArticleEditor = false
        this.showArticleEditor = true
      },
      onEditArticle(item) {
        // 需要掉接口获取到内容
        Article.getById(item.id).then((res) => {
          this.curArticle = res
          this.showArticleEditor = false
          this.showArticleEditor = true
        })
      },
      onFinishEdit(item) {
        console.log("finish edit item")
        this.dataTrigger = !this.dataTrigger
        this.showArticleEditor = false
      },

      deleteArticle(item) {
        this.$dialog.confirm({
          text: "确定要删除文章:" + item.subject,
          title: "警告",
          waitForResult: true,
          actions: {
            false: {
              text: "取消",
              color: "blue",
            },
            true: {
              text: "确定",
              color: "red",
              handle: () => {
                return item.delete().then((res) => {
                  this.dataTrigger = !this.dataTrigger
                  return
                })
              },
            },
          },
        })
      },
    },
  }
</script>
